<template>
  <el-card>
    <p style="font-size: xx-large">我的项目</p>
    <el-col :span="22" :offset="1">
      <el-card style="margin-bottom: 10px">

      </el-card>
      <el-card>
        <el-table
          :data="projects"
          style="width: 100%"
          max-height="380">
          <el-table-column type="expand" fixed prop="pId" label=" " width="auto">
            <template slot-scope="props">
              <el-form label-position="left" inline class="demo-table-expand">
                <div>
                  <el-form-item label="项目当前进度">
                    {{ props.row.pPeriodStatus }}
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="项目当前状态">
                    {{ props.row.pProjectStatus }}
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="项目文件地址">
                    {{ props.row.pFileUrl }}
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="模型任务基本工资">
                    {{ props.row.pModelWage }}
                  </el-form-item>
                </div>
                <div>
                  <el-form-item label="渲染任务基本工资">
                  {{ props.row.pRenderWage }}
                  </el-form-item>
                </div>

                <div>
                  <el-form-item label="后期任务基本工资">
                    {{ props.row.pAfterWage }}
                  </el-form-item>
                </div>


              </el-form>
            </template>
          </el-table-column>

          <el-table-column
            prop="pId"
            label="项目id"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pName"
            label="项目名称"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pCreateDate"
            label="创建日期"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pEndDate"
            label="截止日期"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pType"
            label="项目类型"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pModelManagerId"
            label="模型主管id"
            width="auto">
          </el-table-column>
          <el-table-column
            prop="pRenderManagerId"
            label="渲染主管id"
            width="auto">
          </el-table-column>

          <el-table-column
            prop="pAfterManagerId"
            label="后期主管id"
            width="auto">
          </el-table-column>

  <!--        <el-table-column-->
  <!--          label=" "-->
  <!--          width="80">-->
  <!--          <template slot-scope="scope">-->
  <!--            <el-button type="text" size="small" @click="handleDetail(scope.$index,projects)">详情</el-button>-->

  <!--          </template>-->
  <!--        </el-table-column>-->
        </el-table>
          <template>

          </template>
      </el-card>
    </el-col>
  </el-card>
</template>

<script>
  import Global from '../../utils/global'
  var projectStatusMap = ['已完成','暂停','终止','进行中']
  var periodStatusMap = ['创建成功','建模结束','渲染结束','后期结束','验收结束']
  var typeMap = ['大型','中型','小型','微型']
  export default {
    name: 'OldMyProject',
    data(){
      return{
        glo:new Global,
        projects:[],
        idx:-1,
        dialogFormVisible:false,
        form:{
          pId: null,
          pName:null,
          pCreateDate:null,
          pEndDate: null,
          pType:null,
          cId: null,
          pModelManagerId: null,
          pRenderManagerId: null,
          pAfterManagerId:null,
          pModelStaff:null,
          pRenderStaff:null,
          pAfterStaff: null,
          pPeriodStatus: null,
          pProjectStatus: null,
          pFileUrl: null,
          pModelWage: null,
          pRenderWage: null,
          pAfterWage: null,
        },

      }
    },
    methods:{
      handleDetail(index,projects) {
        this.idx = index;
        this.form = projects[index];
        this.dialogFormVisible = true;
        // this.dialogFormVisible = true;
        // this.glo.sendDate(this.glo.server + "frontDesk/getAllClient", data, this.handleRes,"POST")
      },

      inserTable (line) {
        if(!line.pModelStaff){
          line.pModelStaff="暂无"
        }
        if(!line.pModelStaff){
          line.pRenderStaff="暂无"
        }
        if(!line.pModelStaff){
          line.pAfterStaff="暂无"
        }
        line.pType = typeMap[line.pType];
        line.pPeriodStatus = periodStatusMap[line.pPeriodStatus]
        line.pProjectStatus = projectStatusMap[line.pProjectStatus]
        this.projects.push(
          {
            pId: line.pId,
            pName:line.pName,
            pCreateDate:line.pCreateDate,
            pEndDate: line.pEndDate,
            pType:line.pType,
            cId: line.cId,
            pModelManagerId: line.pModelManagerId,
            pRenderManagerId: line.pRenderManagerId,
            pAfterManagerId: line.pAfterManagerId,
            pModelStaff: line.pModelStaff,
            pRenderStaff: line.pRenderStaff,
            pAfterStaff: line.pAfterStaff,
            pPeriodStatus: line.pPeriodStatus,
            pProjectStatus: line.pProjectStatus,
            pFileUrl: line.pFileUrl,
            pModelWage: line.pModelWage,
            pRenderWage: line.pRenderWage,
            pAfterWage: line.pAfterWage,
          }
        )
      },

      initProjectPage (res) {
        for (var line in res.data.commitLogList){
          this.inserTable(res.data.commitLogList[line])
        }
      },

      handleRes (res) {
        console.log(res);
        let feedBack = eval(res);
        if (feedBack.success == false) {//登录失败
          let tmp = feedBack.message
          this.$message.error(tmp);
          return;
        }
        this.$message.success("项目获取成功^^")
        this.initProjectPage(feedBack)
      },

      getAllProject () {
        var data = {
          sId: this.glo.getData('StaffInfo').sId
        }
        this.glo.sendDate(this.glo.server + "staff/getOwnProject", data, this.handleRes,"POST")

      },
    },
    mounted () {
      this.getAllProject()
    }

  }
</script>

<style scoped>
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 400px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>
